<template>
  <div class="w-full ">
    <h1>动态表单示例</h1>
    <DynamicForm :fields="formFields" submitText="保存" @submit="handleSubmit" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import DynamicForm from '../components/DynamicForm/DynamicForm.vue';
import type { FormField } from '../types/dynamicForm';
import { required, email, minLength, maxLength } from '../utils/validators';


export default defineComponent({
  name: 'App',
  components: { DynamicForm },
  setup() {
    const formFields: FormField[] = [
      {
        type: 'input',
        name: 'username',
        label: '用户名',
        required: true,
        placeholder: '请输入用户名',
        validation: [
          minLength(3, '用户名至少需要3个字符'),
          maxLength(20, '用户名不能超过20个字符')
        ]
      },
      {
        type: 'input',
        name: 'email',
        label: '邮箱',
        required: true,
        placeholder: '请输入邮箱',
        validation: [
          email('请输入有效的邮箱地址')
        ],
        props: {
          type: 'email'
        }
      },
      {
        type: 'input',
        name: 'password',
        label: '密码',
        required: true,
        placeholder: '请输入密码',
        validation: [
          minLength(6, '密码至少需要6个字符')
        ],
        props: {
          type: 'password'
        }
      },
      {
        type: 'select',
        name: 'country',
        label: '国家',
        required: true,
        placeholder: '请选择国家',
        options: [
          { label: '中国', value: 'china' },
          { label: '美国', value: 'usa' },
          { label: '日本', value: 'japan', disabled: true }
        ]
      },
      {
        type: 'radio',
        name: 'gender',
        label: '性别',
        required: true,
        options: [
          { label: '男', value: 'male' },
          { label: '女', value: 'female' },
          { label: '其他', value: 'other' }
        ]
      },
      {
        type: 'checkbox',
        name: 'hobbies',
        label: '兴趣爱好',
        options: [
          { label: '阅读', value: 'reading' },
          { label: '运动', value: 'sports' },
          { label: '音乐', value: 'music' }
        ]
      },
      {
        type: 'date',
        name: 'birthday',
        label: '生日',
        placeholder: '请选择生日'
      },
      {
        type: 'textarea',
        name: 'bio',
        label: '个人简介',
        placeholder: '请介绍一下你自己...',
        validation: [
          maxLength(200, '个人简介不能超过200个字符')
        ]
      },
      {
        type: 'switch',
        name: 'newsletter',
        label: '订阅新闻邮件',
        defaultValue: true
      },
      {
        type: 'slider',
        name: 'satisfaction',
        label: '满意度',
        defaultValue: 50,
        props: {
          min: 0,
          max: 100
        }
      }
    ];

    const handleSubmit = (data: any) => {
      console.log('表单提交数据:', data);
      // 这里可以添加API调用等逻辑
      return new Promise<void>(resolve => {
        setTimeout(() => {
          alert('表单提交成功!');
          console.log('模拟API调用成功');
          resolve();
        }, 1500);
      });
    };

    return {
      formFields,
      handleSubmit
    };
  }
});
</script>

<style>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
</style>